<template>
  <div class="charing" @click="jumpTo(`/pay?id=${data.id}`)">
    <div :class="data.status == 3?'warm-contant':'no-contant'">{{ID}} 插头</div>
    <div class="detail-contant">
      <img :src="free" class="detail-img" v-if="data.status == 1">
      <img :src="ing" class="detail-img" v-if="data.status == 2">
      <img :src="warm" class="detail-img" v-if="data.status == 3">
      <img :src="warm" class="detail-img" v-if="data.status == 0">
      <div class="progress">
        <div class="space"></div>
        <div
          :class="data.status==2?'line':data.status==1?'free-line':'warm-line'"
          :style="{'height':percent}"
        ></div>
      </div>
      <div class="ing-status" v-if="data.status == 2">
        <div class="now">
          <span>充电中</span>
        </div>
        <div class="num">{{data.power}}W</div>
        <div class="time">{{time}}</div>
      </div>
      <div class="free-status" v-if="data.status == 1">
        <div class="now">
          <span>空闲中</span>
        </div>
        <div class="num">可接入</div>
      </div>
      <div class="warm-status" v-if="data.status == 3">
        <div class="now">
          <span>故障中</span>
        </div>
        <div class="num">不可用</div>
      </div>
      <div class="warm-status" v-if="data.status == 0">
        <div class="now">
          <span>已离线</span>
        </div>
        <div class="num">不可用</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
</style>

<script>
import { mapActions } from "vuex";
export default {
  name: "Charing",
  data() {
    return {
      free: require("../../assets/free.png"),
      ing: require("../../assets/ing.gif"),
      warm: require("../../assets/warm.png")
    };
  },
  methods: {
    ...mapActions("PayType", ["setID"]),
    jumpTo(path) {
      if (this.data.status == 3) {
        this.$dialog.toast({
          mes: "故障中",
          icon: "error",
          timeout: 1500
        });
        return;
      }

      if (this.data.status == 2) {
        this.$dialog.toast({
          mes: "插头正在被使用",
          timeout: 1500
        });
        return;
      }

      if (this.data.status == 0) {
        this.$dialog.toast({
          mes: "已离线,暂不可用",
          timeout: 1500
        });
        return;
      }

      this.setID(this.data.id);
      console.log(this.data.id);
      this.$router.push({
        path: path,
        query: {
          id: this.data.id
        }
      });
    },
    // 转化时分秒
    trunTime(result) {
      let h =
        Math.floor(result / 3600) < 10
          ? "0" + Math.floor(result / 3600)
          : Math.floor(result / 3600);
      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);
      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);
      return (result = h + ":" + m + ":" + s);
    }
  },
  computed: {
    // 更新时间
    time() {
      // 获取当前时间戳
      const now = parseInt(new Date().getTime() / 1000, 10);
      let showTime = now - this.data.starttime;
      showTime = this.trunTime(showTime);
      return showTime;
    },
    percent() {
      let res = this.data.power / this.data.maxpower;
      res = res * 100;
      res = res + "%";
      return res;
    },
    ID() {
      let res = 0;
      if (this.data.s_code <= 9) {
        res = "0" + this.data.s_code;
      } else {
        res = this.data.s_code;
      }
      return res;
    }
  },
  props: ["data"],
  created() {}
};
</script>